<template>
  <view class="custom-tabbar u-row-around">
    <view @click.stop="togglePage(item,index)"
          :class="currentTab == index ? 'tabbar-item tabbar-item-active' : 'tabbar-item'" v-for="(item,index) in list"
          :key="index">
      <!--			<view class="line"></view>-->

      <view class="icons">
        <image class="menuBg" v-if="currentTab == index" :style="{
        left:142 * index + 'rpx'
      }" src="/static/choice.png" mode="widthFix"></image>
        <image class="menu" :src="item.iconPath" mode="widthFix"></image>
      </view>
      <!--			<view :class="currentTab == index ? 'custom-tabbar-txt-active' : 'custom-tabbar-txt'">-->
      <!--				{{ item.text }}-->
      <!--			</view>-->
    </view>
  </view>
</template>

<script setup>
import {
  onLoad
} from "@dcloudio/uni-app"

import {
  reactive
} from 'vue';


export default {
  name: 'tabbar',
  props: {
    currentTab: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      list: [{
        "pagePath": "/pages/home/index",
        "iconPath": "/static/menuIcon1.png",
        selectBg: "/static/menuBg1.png",
        "text": "首页"
      },
        // {
        //   "pagePath": "/pages/pickUp/index",
        //   "iconPath": "/static/menuIcon2.png",
        //   selectBg: "/static/menuBg2.png",
        //   "text": "取号"
        // },
        {
          "pagePath": "/pages/home/empty",
          "iconPath": "/static/menuIcon2.png",
          selectBg: "/static/menuBg2.png",
          "text": "拼卡"
        },
        {
          "pagePath": "/pages/order/index",
          "iconPath": "/static/menuIcon3.png",
          selectBg: "/static/menuBg3.png",
          "text": "订单"
        },
        {
          "pagePath": "/pages/mine/index",
          "iconPath": "/static/menuIcon4.png",
          selectBg: "/static/menuBg4.png",
          "text": "我的"
        },
      ]
    }
  },
  methods: {
    togglePage(item, index) {
      uni.switchTab({
        url: item.pagePath
      })
    }
  }

}
</script>

<style lang="scss">
.menuBg {
  position: absolute;
  width: 250rpx;
  left: -102rpx !important;
  top: -85rpx;
}

.icons {
  position: relative;
}

.custom-tabbar {
  height: 172rpx;
  position: fixed;
  left: 34rpx;
  right: 34rpx;
  padding: 0 45rpx;
  // bottom: calc(20rpx + env(safe-area-inset-bottom));
  bottom: 30rpx;
  z-index: 9999;
  display: flex;
  background: rgba(0, 0, 0, 0.41);
  border-radius: 86rpx;
  border: 2rpx solid #262a3c;
  backdrop-filter: blur(7px);
  align-items: center;
  //justify-content: space-between;
}

.tabbar-item {
  flex: 1;
  // width: 25%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  .menu {
    width: 45rpx;
    position: relative;
    z-index: 999;

  }

  .custom-tabbar-txt {
    color: #373642;
    font-size: 22rpx;
  }

  .custom-tabbar-txt-active {
    color: #fff;
    font-size: 22rpx;

  }
}

.tabbar-item-active {
  position: relative;

  // &::before {
  // 	content: "";
  // 	width: 48rpx;
  // 	height: 7rpx;
  // 	display: inline-block;
  // 	position: absolute;
  // 	top: 0;
  // 	left: 50%;
  // 	transform: translateX(-50%);
  // 	background-color: #b7f260;
  // 	border-radius: 0 0 15rpx 15rpx;
  // }
}
</style>
